<template>
    <div style="margin-left: auto;">
        <h1>销售订单</h1>
    </div>

    <div class="app-container">
        <!-- 按钮 -->
        <el-card>
            <el-button v-print="'#printTest'">打印</el-button>
            <el-button type="primary" @click="SalesOrderAdd()" class="hidden">保存</el-button>
        </el-card>
    </div>
    <!-- 申请表单数据 -->
    <div id="printTest">
    </div>
    <hr>
    <el-scrollbar style="height: 320px;color: dimgray">
        <div class="scrollbar-flex-content">
            <p class="scrollbar-demo-item">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="单据编码：" style="width: 308px">
                        <el-input v-model="form.documentNumber" placeholder="" />
                    </el-form-item>
                    <el-form-item label="单据日期：" style="width: 308px">
                        <el-date-picker v-model="form.documentDate" type="date" />
                    </el-form-item>
                    <el-form-item label="单据状态：" style="width: 308px">
                        <el-select v-model="form.documentStatus">
                            <el-option label="开立" value="开立" />
                            <el-option label="审核" value="审核" />
                            <el-option label="返回" value="返回" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单据类型：" style="width: 308px">
                        <el-select v-model="form.documentType">
                            <el-option label="业务订单" value="业务订单" />
                            <el-option label="其他订单" value="其他订单" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="业务类型：" style="width: 308px">
                        <el-select v-model="form.businessType">
                            <el-option label="销售订单" value="销售订单" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务状态：" style="width: 308px">
                        <el-select v-model="form.businessStatus">
                            <el-option label="正常" value="正常" />
                            <el-option label="挂机" value="挂机" />
                            <el-option label="手工关闭" value="手工关闭" />
                            <el-option label="系统关闭" value="系统关闭" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="销售部门：" style="width: 308px">
                        <el-select v-model="form.salesDepartmentName">
                            <el-option label="总经办" value="1" />
                            <el-option label="市场部" value="2" />
                            <el-option label="采购部" value="3" />
                            <el-option label="销售部" value="4" />
                            <el-option label="生产运营中心" value="5" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="销售人员：" style="width: 308px">
                        <el-select v-model="form.salesStaff">
                            <el-option label="赵多和" value="赵多和" />
                            <el-option label="姜楠" value="姜楠" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="操作员：" style="width: 308px">
                        <el-input v-model="form.operatorName" />
                    </el-form-item>
                    <el-form-item label="销售类型：" style="width: 308px">
                        <el-select v-model="form.salesType">
                            <el-option label="国内品牌" value="国内品牌" />
                            <el-option label="外购成品" value="外购成品" />
                            <el-option label="外购原料" value="外购原料" />
                            <el-option label="自接订单" value="自接订单" />
                            <el-option label="自制销售" value="自制销售" />
                            <el-option label="客供销售" value="客供销售" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供货方式：" style="width: 308px">
                        <el-select v-model="form.modeDelivery">
                            <el-option label="计划生产" value="计划生产" />
                            <el-option label="库存供应" value="库存供应" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="客户名称：" style="width: 308px">
                        <el-input v-model="form.customerProfileName" />
                    </el-form-item><el-link type="primary" @click="form1.dialogTableVisible = true">选择</el-link>
                    <div>
                        <el-dialog v-model="form1.dialogTableVisible" title="选择客户" width="980">
                            <el-form :inline="true" :model="page" class="demo-form-inline">
                                <el-form-item label="客户名称">
                                    <el-input v-model="page.customerName" />
                                </el-form-item>
                                <el-form-item label="联系人">
                                    <el-input v-model="page.businessContacts" />
                                </el-form-item>
                                <el-button type="primary" @click="SearchCustomerProfilelist">搜索</el-button>
                            </el-form>
                            <el-table :data="CustomerProfilelist">
                                <el-table-column property="customerProfileId" label="序号" width="150" />
                                <el-table-column property="customerName" label="客户名称" width="200" />
                                <el-table-column property="warehouseName" label="联系人" />
                                <el-table-column property="phone" label="手机号" />
                                <el-table-column property="states" label="状态">
                                    <template #default="scope">
                                        <el-switch v-model="scope.row.states" disabled="true" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template #default="scope">
                                        <el-button type="primary"
                                            @click="SelectName(scope.row.customerName)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <table>
                                <tr>
                                    <td>
                                        <el-pagination v-model:current-page="page.PageIndex"
                                            v-model:page-size="page.PageSize" :page-sizes="[1, 2, 3, 4]" :size="false"
                                            :disabled="false" :background="true" layout="slot,total"
                                            :total="page.totalCount" prev-text="上一页" next-text="下一页"
                                            @size-change="handleSizeChange" @current-change="handleCurrentChange">
                                        </el-pagination>
                                    </td>
                                    <br>
                                    <td>
                                        <el-pagination v-model:current-page="page.PageIndex"
                                            v-model:page-size="page.PageSize" :page-sizes="[1, 2, 3, 4]" :size="false"
                                            :disabled="false" :background="true" layout="slot, sizes,prev, pager, next"
                                            :total="page.totalCount" prev-text="上一页" next-text="下一页"
                                            @size-change="handleSizeChange" @current-change="handleCurrentChange">
                                            <button @click="handleCurrentChange(1)"
                                                :disabled="page.PageIndex == 1">首页</button>
                                        </el-pagination>
                                    </td>
                                    <br>
                                    <td>
                                        <el-pagination v-model:current-page="page.PageIndex"
                                            v-model:page-size="page.PageSize" :page-sizes="[1, 2, 3, 4]" :size="false"
                                            :disabled="false" :background="true" layout="slot, jumper"
                                            :total="page.totalCount" prev-text="上一页" next-text="下一页"
                                            @size-change="handleSizeChange" @current-change="handleCurrentChange">
                                            <button @click="handleCurrentChange(page.pageCount)"
                                                :disabled="page.PageIndex == page.pageCount">尾页</button>
                                        </el-pagination>
                                    </td>
                                </tr>
                            </table>
                        </el-dialog>
                    </div>
                    <el-form-item label="合同号" style="width: 308px">
                        <el-input v-model="form.contractNumber" style="width: 149PX;" />
                        <el-link type="primary" @click="dialogFormVisiblePDF = true">上传</el-link>
                    </el-form-item>
                    <el-dialog v-model="dialogFormVisiblePDF" title="上传PDF" width="500">
                        <el-upload class="upload-demo" drag
                            action="http://localhost:5020/api/SalesManagementWrite/UploadFile"
                            :before-upload="beforeUpload" :on-success="handleSuccess" multiple>
                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                            <div class="el-upload__text">将文件拖入此处 或 <em>选择文件</em></div>
                            <template #tip>
                                <div class="el-upload__tip">提示：请上传双方盖章后的销售合同正本扫描件PDF格式</div>
                            </template>
                        </el-upload>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogFormVisiblePDF = false">取 消</el-button>
                                <el-button type="primary" @click="handleConfirm">确 定</el-button>
                            </span>
                        </template>
                    </el-dialog>
                    <el-form-item label="付款条件：" style="width: 308px">
                        <el-input v-model="form.paymentTerms" />
                    </el-form-item>
                    <el-form-item label="交付日期：" style="width: 308px">
                        <el-date-picker v-model="form.deliverDate" type="date" />
                    </el-form-item>
                    <el-form-item label="交期状态：" style="width: 308px">
                        <el-radio-group v-model="form.deliveryStatus">
                            <el-radio value="1" size="large">预计</el-radio>
                            <el-radio value="2" size="large">确认</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="收货人：" style="width: 308px">
                        <el-input v-model="form.consignee" />
                    </el-form-item>
                    <el-form-item label="电话：" style="width: 308px">
                        <el-input v-model="form.phone" />
                    </el-form-item>
                    <el-form-item label="地址：" style="width: 308px">
                        <el-input v-model="form.address" />
                    </el-form-item>
                    <el-form-item label="目的国家：" style="width: 308px">
                        <el-input v-model="form.destinationCountry" />
                    </el-form-item>
                    <el-form-item label="备注信息：" style="width: 308px">
                        <el-input v-model="form.noteInformation" style="width: 240px" :rows="2" type="textarea" />
                    </el-form-item>
                </el-form>
            </p>
        </div>
    </el-scrollbar>

    <el-button type="primary" @click="add">新增物料</el-button>
    <!-- <el-button type="primary" @click="addlist">保存</el-button> -->
    <table style="border-collapse:collapse">
        <tr>
            <td>序号</td>
            <td>物料编码</td>
            <td>物料名称</td>
            <td>型号规格</td>
            <td>主计量</td>
            <td>数量</td>
            <td>单价</td>
            <td>金额</td>
            <td>件数</td>
            <td>质量要求</td>
            <td>包装要求</td>
            <td>备注</td>
            <td>操作</td>
        </tr>
        <tr v-for="(ruleForm, index) in loge.healthArray">
            <td>
                {{ ruleForm.salesOrderMaterialId }}
            </td>
            <td>
                {{ ruleForm.itemBianma }}
                <el-link type="primary" @click="xuanze(index)">选择</el-link>
                <div>
                    <el-dialog v-model="form1.dialogTableVisible111" title="选择物料" width="900" style="height: 600px;">
                        <div class="common-layout" style="width: 165px;float: left">
                            <el-container>
                                <el-aside width="165px" style="margin-left: 10px;">
                                    <el-tree ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" style="
                width: 165px;
                border: 0px solid #ccc;
                float: left;
                height: 500px
                " default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode"
                                        @node-click="handleNodeClick" />

                                </el-aside>
                                <el-main>
                                </el-main>
                            </el-container>
                        </div>
                        <div class="common-layout" style="float: right;top: 12px;">
                            <el-form :inline="true" :model="page" class="demo-form-inline">
                                <el-form-item label="物料编码">
                                    <el-input v-model="Materials.itemBianma" />
                                </el-form-item>
                                <el-form-item label="物料名称">
                                    <el-input v-model="Materials.itemName" />
                                </el-form-item>
                                <el-button type="primary" @click="SearchMaterialsShow">搜索</el-button>
                            </el-form>
                            <el-table :data="MaterialsShowlist" style="height: 500px;">
                                <el-table-column property="itemBianma" label="物料编码" width="150" />
                                <el-table-column property="itemName" label="物料名称" width="200" />
                                <el-table-column property="modelspecification" label="型号规格" />
                                <el-table-column property="measureId" label="主计量" />
                                <el-table-column label="操作">
                                    <template #default="scope">
                                        <el-button type="primary"
                                            @click="Selectnumber(scope.row.itemBianma, scope.row.itemName, scope.row.modelspecification, index1)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>

                    </el-dialog>
                </div>
            </td>
            <td>
                {{ ruleForm.materialName }}
            </td>
            <td>
                {{ ruleForm.typeSpecification }}
                <br>
                <el-select v-model="ruleForm.color" placeholder="请选择" style="width: 100px">
                    <el-option lable="白色" value="白色"></el-option>
                    <el-option lable="黑色" value="黑色"></el-option>
                    <el-option lable="红色" value="红色"></el-option>
                    <el-option lable="黄色" value="黄色"></el-option>
                    <el-option lable="蓝色" value="蓝色"></el-option>
                </el-select>
            </td>
            <td>
                <el-select v-model="ruleForm.documentType" placeholder="请选择" style="width: 100px">
                    <el-option lable="台" value="台"></el-option>
                    <el-option lable="件" value="件"></el-option>
                    <el-option lable="个" value="个"></el-option>
                    <el-option lable="盒" value="盒"></el-option>
                </el-select>
            </td>
            <td>
                <el-input v-model="ruleForm.quantity" @blur="jisuan(index)" placeholder="请输入" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-input v-model="ruleForm.unitPrice" @blur="jisuan(index)" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-input v-model="ruleForm.amount" style="width: 100px">

                </el-input>

            </td>
            <td>
                <el-input v-model="ruleForm.numberofpackages" aria-placeholder="件数" style="width: 100px">
                </el-input>
                <br>
                <el-select v-model="ruleForm.pattern" style="width: 100px">
                    <el-option lable="箱" value="台"></el-option>
                    <el-option lable="桶" value="桶"></el-option>
                    <el-option lable="袋" value="袋"></el-option>
                </el-select>
            </td>
            <td>
                <el-input v-model="ruleForm.quality" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-input v-model="ruleForm.packing" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-input v-model="ruleForm.remark" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-link style="color: red;" @click="del">删除</el-link>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import Cookie from 'cookies-ts'
import axios from 'axios'
import { number } from 'echarts'
const apiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const cpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const dialogFormVisiblePDF: any = ref(false);
const form1 = reactive({
    dialogTableVisible: false,
    dialogTableVisible111: false,
})
onMounted(() => {
    SearchCustomerProfilelist()
    SearchMaterialsShow()
    loadData()
    //绑定树形
    GetBang()
})
const handleConfirm = () => {
    dialogFormVisiblePDF.value = false;
    // 这里可以添加其他逻辑，比如提交表单等
};
//映射用户名到操作员文本框里
const loadData = () => {
    if (cookie.get('employeeName') != null) {
        form.operatorName = cookie.get('employeeName') as string
    }
}
//上传图片
const beforeUpload = (file: any) => {
    const isPDF = file.type === 'application/pdf';
    if (!isPDF) {
        ElMessage.error('请上传PDF格式的文件');
    }
    return isPDF;
};
const handleSuccess = (response: any, file: any, fileList: any) => {
    form.contractNumber = fileList[0].response; // 假设服务器返回文件路径
    console.log(form.contractNumber, 111);

};
//选择客户表 反填客户名称
const SelectName = (customerName: any) => {
    localStorage.setItem('customerName', customerName)
    if (localStorage.getItem('customerName') != null) {
        form.customerProfileName = localStorage.getItem('customerName') as string
    }
    form1.dialogTableVisible = false
}
const index1 = ref(0)
const xuanze = (index: any) => {
    form1.dialogTableVisible111 = true
    index1.value = index
}
const cookie = new Cookie()
const router = useRouter()
const route = useRoute()
const form = reactive({
    "documentNumber": "",
    "documentDate": "",
    "documentStatus": "",
    "documentType": "",
    "businessType": "",
    "businessStatus": "",
    "salesDepartmentName": 0,
    "salesStaff": "",
    "operatorName": "",
    "salesType": "",
    "modeDelivery": "",
    "customerProfileName": "",
    "contractNumber": "",
    "paymentTerms": "",
    "deliverDate": "",
    "deliveryStatus": 2,
    "consignee": "",
    "phone": "",
    "address": "",
    "destinationCountry": "",
    "noteInformation": "",
    "itemBianma": localStorage.getItem('itemBianma') as string,
})

const jisuan = (index: number) => {
    var price = loge.healthArray[index].unitPrice
    var num = loge.healthArray[index].quantity
    loge.healthArray[index].amount = price * num

}
const filterNode = (value: string, data: any) => {
    if (!value) return true;
    return data.label.includes(value);
};

const Selectnumber = (itemBianma: any, materialName: any, typeSpecification: any, index: any) => {
    console.log(index)
    localStorage.setItem('itemBianma', itemBianma)
    localStorage.setItem('itemName', materialName)
    localStorage.setItem('modelspecification', typeSpecification)
    // cookie.set('itemBianma', itemBianma)
    // cookie.set('itemName', materialName)
    // cookie.set('modelspecification', typeSpecification)
    if (localStorage.getItem('itemBianma') != null || localStorage.getItem('itemName') != null || localStorage.getItem('modelspecification') != null || localStorage.getItem('measureId') != null) {
        loge.healthArray[index].itemBianma = localStorage.getItem('itemBianma') as string
        loge.healthArray[index].materialName = localStorage.getItem('itemName') as string
        loge.healthArray[index].typeSpecification = localStorage.getItem('modelspecification') as string
    }
    console.log(loge.healthArray[index])
    form1.dialogTableVisible111 = false
}
//树形级联
const defaultProps = {
    children: 'children',
    label: 'label',
}
//树形数据
var data = ref([])
function GetBang() {
    axios({
        url: bpiurls + '/api/Materials/GetmaterialTree',
        method: 'get'
    })
        .then((res) => {
            data.value = res.data.data
        })
}
const handleNodeClick = (data: any) => {

    uptform.materialTypeName = data.label
    uptform.pId = data.value
    console.log(uptform.pId)
}
const uptform = reactive({
    materialTypeName: '',
    pId: 0,
});


//新增行序号
const numbers = ref(1)
const loge = reactive({
    healthArray: <any>[
        reactive({
            salesOrderMaterialId: numbers.value,
            itemBianma: "",
            materialName: "",
            typeSpecification: "",
            color: "",
            documentType: "",
            quantity: 0,
            unitPrice: 0,
            amount: 0,
            numberofpackages: 0,
            pattern: "",
            quality: "",
            packing: "",
            remark: "",
            createdOwnerId: cookie.get('employeeName'),
            createdTime: new Date(),
            updatedOwnerId: "",
            updatedTime: new Date(),
            deletedOwnerId: "",
            deletedTime: new Date(),
            isDeleted: true,
            auditor: cookie.get('employeeName'),
            auditDate: new Date(),
        })
    ]
});
const aaa = cookie.get('employeeName')
console.log(aaa)
//新增行
const add = () => {
    loge.healthArray.push(reactive({
        salesOrderMaterialId: loge.healthArray.length + numbers.value,
        itemBianma: "",
        materialName: "",
        typeSpecification: "",
        color: "",
        documentType: "",
        quantity: 0,
        unitPrice: 0,
        amount: 0,
        numberofpackages: 0,
        pattern: "",
        quality: "",
        packing: "",
        remark: "",
        createdOwnerId: cookie.get('employeeName'),
        createdTime: new Date(),
        updatedOwnerId: "",
        updatedTime: new Date(),
        deletedOwnerId: "",
        deletedTime: new Date(),
        isDeleted: true,
        auditor: cookie.get('employeeName'),
        auditDate: new Date(),
    }))
}
//删除行
const del = () => {
    loge.healthArray.splice(loge.healthArray.length - 1, 1)
    ElMessage.warning({
        message: '删除成功',
    })
}
const Materials = reactive({
    itemBianma: "",
    itemName: ""
})
const MaterialsShowlist = ref([])
const SearchMaterialsShow = () => {
    axios.get(bpiurls + '/api/Materials/MaterialesSearch', {
        params: {
            materialTypeId: uptform.pId,
            itemBianma: Materials.itemBianma,
            itemName: Materials.itemName
        }
    }).then((res) => {
        MaterialsShowlist.value = res.data.data2
        console.log(MaterialsShowlist.value);
    })
}
const page = reactive({
    customerName: "",
    businessContacts: "",
    PageIndex: 1,
    PageSize: 100,
    totalCount: 0,
    pageCount: 0,
})
const handleSizeChange = (val: number) => {
    page.PageSize = val;
    SearchCustomerProfilelist();
}
const handleCurrentChange = (val: number) => {
    page.PageIndex = val;
    SearchCustomerProfilelist();
}
const CustomerProfilelist = ref([])
const SearchCustomerProfilelist = () => {
    axios.post(cpiurls + '/api/SalesOrder/SearchCustomerProfile', {
        customerName: page.customerName,
        businessContacts: page.businessContacts,
        PageIndex: page.PageIndex,
        PageSize: page.PageSize
    }).then((res) => {
        CustomerProfilelist.value = res.data.data
        page.totalCount = res.data.totalCount
        page.pageCount = res.data.pageCount;
    })
}


//销售订单添加
const SalesOrderAdd = () => {
    // "documentNumber": "",
    // "documentDate": "",
    // "documentStatus": "",
    // "documentType": "",
    // "businessType": "",
    // "businessStatus": "",
    // "salesDepartmentName": 0,
    // "salesStaff": "",
    // "operatorName": "",
    // "salesType": "",
    // "modeDelivery": "",
    // "customerProfileName": "",
    // "contractNumber": "",
    // "paymentTerms": "",
    // "deliverDate": "",
    // "deliveryStatus": 2,
    // "consignee": "",
    // "phone": "",
    // "address": "",
    // "destinationCountry": "",
    // "noteInformation": "",
    if (form.documentNumber == "" || form.documentDate == "" || form.documentStatus == "" || form.operatorName == "" || form.salesType == "" || form.modeDelivery == "" || form.customerProfileName == "" || form.consignee == "" || form.phone == "" || form.address == "" || form.destinationCountry == "" || form.noteInformation == "") {
        ElMessage.error('请填写完整信息')
        return;
    }
    form.itemBianma = loge.healthArray.itemBianma;
    console.log(loge.healthArray);
    axios.post(apiurls + '/api/SalesManagementWrite/CreateSalesOrder', form)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage({
                    message: '新增成功',
                    type: 'success',
                })
                // router.push('/SalesOrder')
            } else {
                ElMessage({
                    message: '新增失败',
                    type: 'error',
                })
            }
        })
        .catch((err) => {
            console.log(err)
        })

    const request: any = ref({});
    request.SalesOrderMaterials = loge.healthArray;
    console.log(request)
    axios.post(apiurls + '/api/SalesManagementWrite/CreateSalesOrderMaterial', request)
        .then((res1) => {
            if (res1.data.code == 0) {
                ElMessage({
                    message: '新增成功',
                    type: 'success',
                })
                // router.push('/SalesOrder')
            } else {
                ElMessage({
                    message: '新增失败',
                    type: 'error',
                })
            }
        })
        .catch((err) => {
            console.log(err)
        })
}
</script>

<style scoped>
.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1800px;
    height: 300px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
}
</style>
<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
    border-top: 1px solid #ccc;
    /* 设置顶部边框为3px宽度的红色 */
    padding: 10px;
    text-align: center;
}

/* 设置 td 的样式 */

table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    height: 60px;
    width: 150px;
    white-space: nowrap;
    /* 防止内容换行 */
}

/* 可选：为 table 添加样式 */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/*______________________________________________________*/

.table-container {
    max-width: 100%;
    overflow-x: auto;
    /* 启用水平滚动 */
    margin: 20px 0;
    /* 设置容器的外边距 */
}

/* :deep(.el-input__wrapper) {
    box-shadow: none;
    text-align: center;
}

:deep(.el-select__wrapper) {
    box-shadow: none;
}

::v-deep(.center-input .el-input__inner) {
    text-align: center;
} */
</style>
